<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    @font-face {
        font-family: 'YSBangBang';
        src: url('/Public/game/fonts/YSBangBang.ttf') format('truetype');
    }
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background: url('/Public/game/images/back.jpg') center no-repeat; background-size: cover;
        font-family: 'YSBangBang';color: white;
    }
    #main {
        display: flex; flex-direction: column; align-items: center;height: 80vh;overflow: hidden;padding-top:10vh;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }
    h3{
        font-size: 2rem; font-weight: normal;text-align: center; height: 10vh; padding-bottom: 5vh;
    }
    #game{
        position: relative; height: 40vh; width:100vw;
    }
    #checkbox{
        display: block; white-space: nowrap; position: absolute; left: 50%; padding: 10vh 10vh; margin:0 -10vh;
    }
    .checkbox{
        /* transform: scale(2);width:2rem; */
    }
    button{
       background: url('/Public/game/images/btn_start.png') center no-repeat;background-size: 100% 100%; 
       padding:0.4rem 1.2rem 1rem; font-size: 2rem;margin-top: 10vh; color: white;border: none; cursor:pointer;
       
    }
    button:hover{
        color:white;
    }
    button:active{
        transform: scale(0.9); 
    }
</style>
<body>
    <div id="main">
        <div id="title">
            <h3>
                【精准点击任务】请在90秒内在100个框内点上✔
            </h3>
        </div>
        <div id="result">
            <h3></h3>
        </div>
        <div id="game">
            <h3>
                倒计时：<span id="time">90</span>秒<br/>
                得分：<span id="score">0</span>
            </h3>
            <div id="checkbox">
                <volist name="list" id="vo">
                    <input class="checkbox" type="checkbox" id="{$vo}" name="checkbox" id="checkbox" disabled>
                </volist>
            </div>
        </div>

        <div class="btn">
            <button id="start" onclick="gameInit()">开始游戏</button>
        </div>
        
    </div>
</body>
<script>
function getUrlParams(url) {
    const searchParams = new URLSearchParams(url.split('?')[1]);
    const params = {};
    for (const [key, value] of searchParams.entries()) {
        params[key] = value;
    }
    return params;
}
let params = getUrlParams(window.location.href);
let interval
let intervalStatus = false;
console.log(params);
$("#checkbox:not(.checkbox)").click(function(e){
    if(e.target == this){
        let prev = parseInt($(".checkbox:enabled").attr('id')) - 1;
        if(prev <= 0) {
            return false;
        }
        $(".checkbox:enabled").css("transform", "translateY(0)")
        if(prev > 0){
            $(".checkbox:enabled").prop("disabled", true);
        }
        $("#" + prev).prop("disabled", false).prop('checked', false);
        let move = $('#checkbox').position().left +  $("#" + prev).width()
        $('#checkbox').css('left', move)
        let random = (Math.random() - 0.5) * 100;
        $("#" + prev).css("transform", "translateY(" + random + "px)")
            
        $("#score").text(prev - 1)
    }
})
$(".checkbox").click(function(){
    let id = $(this).attr('id');
    if(id == 100){
        gameResult('win')
    }
    let next = parseInt(id) + 1;
    $(this).prop("disabled", true);
    $(this).css("transform", "translateY(0)")
    $("#" + next).prop("disabled", false);
    let random = (Math.random() - 0.5) * 100;
    $("#" + next).css("transform", "translateY(" + random + "px)")
    let move = $('#checkbox').position().left - $(this).width()
    $('#checkbox').css('left', move)
    $("#score").text(id)

})
$("#1").click(function(){
    if(!intervalStatus){
        console.log('start');
        gameStart()
    }
    
})

function gameInit(){
    $("#result").hide()
    $("#game").show()
    $("#time").text("90")
    $(".checkbox").css("transform", "translateY(0)").prop("disabled", true).prop("checked", false);
    $('#checkbox').css('left', '50%')
    $("#1").prop("disabled", false);
    $("#score").text(0)
    clearInterval(interval)
    intervalStatus = false;
}

function gameStart(){
    console.log('start');
    let targetTime = new Date().getTime() + 90000;
    interval = setInterval(function(){
        let now = new Date().getTime();
        if(now >= targetTime){
            gameResult('lose')
            return; 
        }
        let time = Math.round((targetTime - now) / 1000);
        $("#time").text(time);
    }, 100)
    intervalStatus = true;

}
function gameResult(res){
    clearInterval(interval);
    intervalStatus = false
    $("#game").hide();
    $("#result").show();
    if(res == 'win'){
        $("#result h3").text("恭喜通关！")
        $.ajax({
            url:'/Home/Trial/set_game_success?id=' + params.id,
        })
    }else{
        $("#result h3").text("游戏失败！")
    }

}
gameInit();
</script>
</html>